<template>
  <view>
    <baseHead
      title="面试管理"
      bg="#ffffff"
      color="#000"
      text_right="录用列表"
      :right="true"
      @clickRight="clickRight"
    >
      <template slot="textnr">
        <view style="background-color: #ffffff; position: fixed; z-index: 999">
          <u-search
            placeholder="请输入"
            v-model="keyword"
            @blur="blur"
            height="64rpx"
            :showAction="false"
          >
          </u-search>
          <u-tabs
            :list="list1"
            @click="clickTabs"
            :current="typeNumber"
            :itemStyle="{ height: '44px' }"
          >
          </u-tabs>
        </view>
      </template>
    </baseHead>

    <view class="minhtheigh"></view>
    <scroll-view
      @refresherrefresh="onrefresh"
      refresher-enabled="true"
      refresher-default-style="none"
      refresher-background="#f1f2f6"
      refresher-threshold="15"
      :refresher-triggered="loading"
      scroll-y
      :style="{ height: windowHeight - statusBarH - 120 + 'px' }"
      class="scrollview"
      @scrolltolower="ReachBottom"
    >
      <u-loading-icon v-if="loading"></u-loading-icon>
      <view class="" v-if="datalist.length > 0">
        <view class="interview-item" v-for="(item, key) in datalist" :key="key">
          <view class="item-top">
            <view class="date">
              {{
                item.InterviewTime.split(" ")[0].split("-")[0] +
                "年" +
                item.InterviewTime.split(" ")[0].split("-")[1] +
                "月" +
                item.InterviewTime.split(" ")[0].split("-")[2] +
                "日"
              }}
            </view>
            <!-- <view class="time">{{ (item.InterviewTime.split(" ")[1]).slice(0,5) }}</view> -->
            <view class="top-image">
              <image
                v-if="item.InterviewType == 2"
                class="top-image1"
                src="/static/image/my/shipinIcon.png"
                mode=""
              ></image>
              <image
                v-else-if="item.InterviewType == 1"
                class="top-image1"
                src="/static/image/my/yuyin.png"
                mode=""
              ></image>
            </view>
          </view>
          <view class="item-bottom">
            <view class="bottom-top">
              <view class="" @click="jianli(item)">
                <u-avatar
                  class="top-img"
                  shape="circle"
                  :src="URL + item.UserHeadIcon"
                >
                </u-avatar>
              </view>
              <view class="top-text">
                <view class="top-right">
                  <view class="top-right-top">
                    <view class="top-right-top-Job">
                      <text @click="jianli(item)">{{ item.UserName }}</text>
                      <image
                        class="top-right-top-img"
                        src="/static/icon/xiaoxi.png"
                        mode=""
                        @click="goutong(item)"
                      ></image>
                      <view
                        class="bottom-bottom-left-btn"
                        @click="fnPhone(item)"
                      >
                        <image
                          class="bottom-bottom-left-btn-img"
                          src="/static/icon/dianhua.png"
                          mode=""
                        >
                        </image>
                        <text>呼叫</text>
                      </view>
                    </view>
                    <view class="top-right-top-zhuangtai">
                      {{
                        item.InterviewState == 0
                          ? "待接受"
                          : item.InterviewState == 1
                          ? "待面试"
                          : item.InterviewState == 2
                          ? "即将面试"
                          : item.InterviewState == 3
                          ? "已面试"
                          : item.InterviewState == 4
                          ? "已取消"
                          : item.InterviewState == 5
                          ? "已拒绝"
                          : item.InterviewState == 6
                          ? "待记录"
                          : ""
                      }}
                    </view>
                  </view>
                  <view class="top-right-bottom">
                    <view class="top-right-bottom1" @click="zhweixq(item)">
                      <text>{{ item.JobName }}</text>
                      <text>{{ "·" + item.Wage }}</text>
                      <u-icon
                        class="top-right-bottom-icon"
                        name="arrow-right"
                      ></u-icon>
                    </view>
                    <view class="">
                      {{ item.InterviewTime.split(" ")[1].slice(0, 5) }}
                    </view>
                  </view>
                </view>
                <view class=""> </view>
              </view>
            </view>
            <view class="bottom-bottom" v-if="item.InterviewState != 3">
              <view class="bottom-bottom-right">
                <template
                  v-if="item.InterviewState == 0 || item.InterviewState == 2"
                >
                  <template
                    v-if="item.InterviewState == 0 || item.InterviewState == 2"
                  >
                    <view class="right-jujue" @click="jujue(item)">
                      取消面试
                    </view>
                    <view class="right-tongyi" @click="xiugaimianshi(item)">
                      修改面试
                    </view>
                    <template v-if="item.InterviewState == 2">
                      <view class="right-jinru" @click="videoRoom(item)">
                        进入面试
                      </view>
                    </template>
                  </template>
                </template>

                <view class="radioCla" v-if="item.InterviewState == 4">
                  <view class="right-jujue" @click="shanchuClick(item)">
                    删除
                  </view>
                  <view class="right-tongyi" @click="chongxin(item)">
                    重新邀约
                  </view>
                </view>
                <view class="radioCla" v-if="item.InterviewState == 6">
                  <view class="right-jujue" @click="weicanjia(item)">
                    未参加
                  </view>
                  <view class="right-tongyi" @click="yicanjia(item)">
                    已参加
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :loadmoreText="loadmoreText" />
      </view>

      <view v-else style="height: 100%; border: 1px solid #1684fc00">
        <u-empty
          mode="data"
          icon="/static/recruit/index/qsy.png"
          width="350"
          marginTop="150"
        >
        </u-empty>
      </view>
    </scroll-view>

    <view v-if="upopupshowmiashi">
      <Passionateinterview
        :upopupshowmiashi="upopupshowmiashi"
        :Longitude="Longitude"
        :Latitude="Latitude"
        :objlist="objlist"
        @clickbut="clickbut"
        :popTitle="true"
      ></Passionateinterview>
    </view>

    <u-action-sheet
      :actions="listaction"
      :title="titledtext"
      :show="actionsheetshow"
      cancelText="取消"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      @select="selectClick"
      openType="contact"
      @close="actionsheetshow = false"
    ></u-action-sheet>
  </view>
</template>
<script>
import baseHead from "@/pages/component/baseHead.vue";
import Passionateinterview from "@/components/tui-chat/customchat/Passionateinterview";

export default {
  data() {
    return {
      statusBarH: 0, //状态栏高度
      windowHeight: 0, //窗口高度
      upopupshowmiashi: false,
      Longitude: 0,
      Latitude: 0,
      URL: this.$config.domain.staticUrl,
      touxiang: "/static/recruit/index/nan.png ",
      titledtext: "拨打电话",
      listaction: [],
      actionsheetshow: false,
      objlist: {
        InterviewType: "0", //面试方式
        InterviewTime: "", //面试时间
        ProvinceCode: "", //省
        CityCode: "", //市
        AreaCode: "", //区
        PcaAddress: "",
        LinkManName: "", //联系人名称
        LinkManPhone: "", //联系人电话
        Address: "", //面试地址
        Longitude: "", //面试地点 经度
        Latitude: "", //面试地点 纬度
      },

      dianjudata: {},

      keyword: "",
      typeNumber: 0,
      datalist: [],
      list1: [
        {
          id: null,
          name: "全部",
        },
        {
          id: 0,
          name: "待接受",
        },
        {
          id: 1,
          name: "待面试",
        },
        {
          id: 2,
          name: "即将面试",
        },
        {
          id: 3,
          name: "已面试",
        },
        {
          id: 4,
          name: "已取消",
        },
        {
          id: 5,
          name: "已拒绝",
        },
        {
          id: 6,
          name: "待记录",
        },
      ],
      obj: {
        InterviewState: null,
        PageIndex: 1,
        PageSize: 10,
      },
      loadmoreText: "加载更多",
      loading: false,
    };
  },
  //子组件
  components: {
    baseHead,
    Passionateinterview,
  },
  props: {
    type: {
      type: Number,
    },
  },

  // 计算属性
  computed: {},
  created() {
    const app = getApp();
    this.statusBarH = app.globalData.statusBarH;
    this.windowHeight = app.globalData.phoneInformation.windowHeight;

    this.Navigation();
    if (this.type) {
      let num = this.list1.findIndex((item) => {
        return item.id == this.type;
      });
      let arr = this.list1.filter((item) => {
        return item.id == this.type;
      })[0];
      this.typeNumber = num;
      this.clickTabs({
        id: this.type,
        index: num,
        name: arr.name,
      });
    } else {
      this.listdata();
    }
  },
  // 计算方法
  methods: {
    onrefresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.datalist = [];
        this.listdata();
      }, 1000);
    },

    //未参加
    weicanjia(item) {
      let obj = {
        Id: item.Id,
        InterviewState: "4",
      };
      this.$http.huirc.interviewupState(obj).then((res) => {
        if (res.Success) {
          this.datalist = [];
          this.status = "loadmore";
          this.obj.PageIndex = 1;
          this.listdata();
        }
      });
    },

    //已参加
    yicanjia(item) {
      let obj = {
        Id: item.Id,
        InterviewState: "3",
      };
      this.$http.huirc.interviewupState(obj).then((res) => {
        if (res.Success) {
          // this.$util.toast("已同意邀请面试");
          this.datalist = [];
          this.status = "loadmore";
          this.obj.PageIndex = 1;
          this.listdata();
        }
      });
    },

    timestatus(item) {
      const date = new Date().getTime();
      const time = new Date(item).getTime();
      let tag = Math.abs(time - date) > 30 * 60 * 1000 ? false : true;
      return tag;
    },
    Navigation() {
      let tabt = this;
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          //   console.log("当前位置的经度：" + res.longitude);
          //   console.log("当前位置的纬度：" + res.latitude);
          tabt.Longitude = Math.abs(res.longitude);
          tabt.Latitude = Math.abs(res.latitude);
        },
        fail: function (err) {
          console.log("错误：", err);
        },
      });
    },
    ReachBottom() {
      if (this.loadmoreText === "加载更多") {
        this.obj.PageIndex++;
        this.listdata();
      }
    },
    listdata() {
      this.$http.huirc.interviewlistzp(this.obj).then((res) => {
        if (res.Success) {
          this.datalist = res.Result.Total
            ? this.datalist.concat(res.Result.Items)
            : [];
          this.loadmoreText =
            res.Result.Total > this.datalist.length ? "加载更多" : "没有更多了";
        }
      });
    },
    // 未参加
    jujue(item) {
      console.log(item);
      let obj = {
        Id: item.Id,
        InterviewState: "4",
      };
      this.$http.huirc.interviewupState(obj).then((res) => {
        if (res.Success) {
          this.datalist = [];
          this.status = "loadmore";

          this.obj.PageIndex = 1;

          this.listdata();
        }
      });
    },
    // 已参加
    tongyi(item) {
      console.log(item);
      let obj = {
        Id: item.Id,
        InterviewState: "3",
      };
      this.$http.huirc.interviewupState(obj).then((res) => {
        if (res.Success) {
          // this.$util.toast("已同意邀请面试");
          this.datalist = [];
          this.status = "loadmore";
          this.obj.PageIndex = 1;
          this.listdata();
        }
      });
    },
    // 去沟通
    goutong(item) {
      console.log(item);

      if (item.JobDelete == 1) {
        this.$util.toast("职位已关闭");
        return;
      }

      let obj = {
        UserId: item.UserId,
        JobId: item.JobId,
        HasChat: 1,
        ApplyWay: 2,
      };
      console.log(obj);

      this.$http.huirc.jobUserRecordup(obj).then((res) => {
        if (res.Success) {
          // 招聘者-求职 C2C{UserId}
          if (item.UserId) {
            let id = "C2C" + item.UserId;
            const url = `/pages/views/packageE/type-recruit/TUI-Chat/chat?conversationID=${id}`;
            uni.navigateTo({
              url: url,
            });
          }
        }
      });
    },

    //删除
    shanchuClick(item) {
      this.$http.huirc
        .interviewdel({
          Id: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            this.$util.toast("删除成功");
            this.datalist = [];
            this.status = "loadmore";
            this.obj.PageIndex = 1;
            this.listdata();
          }
        });
    },

    clickbut(item) {
      this.upopupshowmiashi = false;
      if (item) {
        let obj = {
          UserId: this.dianjudata.UserId, //求职者id
          JobId: this.dianjudata.JobId, //职位id
          ResumeId: this.dianjudata.ResumeId, //简历Id
          InterviewType: item.InterviewType, //面试方式
          InterviewTime: item.InterviewTime, //面试时间
          ProvinceCode: item.ProvinceCode, //省
          CityCode: item.CityCode, //市
          AreaCode: item.AreaCode, //区
          Address: item.Address, //面试地址
          LinkManName: item.LinkManName, //联系人名称
          LinkManPhone: item.LinkManPhone, //联系人电话
          Longitude: item.Longitude, //面试地点 经度
          Latitude: item.Latitude, //面试地点 纬度
        };
        // 添加面试邀请
        this.$http.huirc.interviewadd(obj).then((res) => {
          if (res.Success) {
            console.log(res.Result);
            this.fasongyaoqing(res.Result);
          }
        });
      }
    },
    //发送邀请
    fasongyaoqing(item) {
      let payload = {
        data: "job-interview",
        description: "职位面试邀请",
        extension: JSON.stringify({
          Id: item.Id, //面试邀请ID
          JobId: item.JobId, //职位ID
          JobName: item.JobName, //职位名称
          UserId: item.UserId, //求职者ID
          ResumeId: item.ResumeId, //简历ID
          InterviewState: 0, //0待接受 1已接受 2已拒绝
          InterviewTime: item.InterviewTime, //面试时间
          JobUserId: item.JobUserId, //职位发布者ID
          Notes: item.Notes, //面试通知内容
        }),
      };

      const message = uni.$TUIKit.createCustomMessage({
        to: `${this.dianjudata.UserId}`,
        conversationType: "C2C",
        payload: payload,
      });
      console.log(message);

      uni.$TUIKit
        .sendMessage(message)
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });

      this.datalist = [];
      this.status = "loadmore";
      this.obj.PageIndex = 1;
      this.listdata();
    },

    //语音面试
    audioRoom(item) {},
    //视频面试
    videoRoom(item) {
      uni.navigateTo({
        url: `/pages/views/packageF/videoCall/index?interviewId=${item.Id}`,
      });
    },

    // 修改面试
    xiugaimianshi(item) {
      this.objlist = {
        InterviewType: item.InterviewType, //面试方式
        InterviewTime: item.InterviewTime, //面试时间
        ProvinceCode: item.ProvinceCode, //省
        CityCode: item.CityCode, //市
        AreaCode: item.AreaCode, //区
        Address: item.Address, //面试地址
        LinkManName: item.LinkManName, //联系人名称
        LinkManPhone: item.LinkManPhone, //联系人电话
        Longitude: item.Longitude, //面试地点 经度
        Latitude: item.Latitude, //面试地点 纬度
      };
      this.dianjudata = item;
      if (this.dianjudata.JobDelete == 1) {
        this.$util.toast("职位已关闭");
        return;
      }
      this.upopupshowmiashi = true;
      this.$emit("childEvent", "修改面试");
    },
    //重新邀约
    chongxin(item) {
      this.objlist = {
        InterviewType: "", //面试方式
        InterviewTime: "", //面试时间
        ProvinceCode: "", //省
        CityCode: "", //市
        AreaCode: "", //区
        Address: "", //面试地址
        LinkManName: "", //联系人名称
        LinkManPhone: "", //联系人电话
        Longitude: "", //面试地点 经度
        Latitude: "", //面试地点 纬度
      };
      this.dianjudata = item;

      if (this.dianjudata.JobDelete == 1) {
        this.$util.toast("职位已关闭");
        return;
      }

      this.upopupshowmiashi = true;
    },

    jianli(item) {
      if (item.ResumeId) {
        uni.navigateTo({
          url: `/pages/views/packageB/type-jobhunting/resume/preview?ids=${item.ResumeId}&typeshow=false`,
        });
      }
    },
    zhweixq(item) {
      if (item.JobDelete == 1) {
        this.$util.toast("该职位已删除！");
      } else {
        if (item.JobId) {
          uni.navigateTo({
            url: `/pages/views/packageA/type-jobhunting/search/JobDetails?id=${item.JobId}`,
          });
        }
      }
    },

    clickTabs(item) {
      if (this.obj.InterviewState == item.id) return;
      this.obj = {
        ...this.obj,
        InterviewState: item.id == -1 ? "" : item.id,
        PageIndex: 1,
      };
      this.typeNumber = item.index;
      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    blur() {
      this.obj = {
        ...this.obj,
        KeyWord: this.keyword,
        PageIndex: 1,
      };

      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    clickRight() {
      uni.navigateTo({
        url: "/pages/views/packageB/type-recruit/miashi/miashiRecord",
      });
    },
    selectClick(item) {
      console.log(item);
      let ph = item.name;
      uni.makePhoneCall({
        phoneNumber: ph, //仅为示例
      });
    },
    fnPhone(item) {
      if (item.UserPhoneNumber) {
        let tahat = this;
        this.actionsheetshow = true;
        this.listaction = [
          {
            name: item.UserPhoneNumber,
          },
        ];
        this.actionsheetshow = true;
      } else {
        // this.$util.toast("");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.miashtop {
  box-sizing: border-box;
}

.minhtheigh {
  height: calc(44px + 64rpx);
}

.scrollview {
  box-sizing: border-box;
}

.interview-item {
  padding: 20rpx 30rpx;

  .item-top {
    display: flex;
    font-size: 24rpx;

    .time {
      margin-left: 20rpx;
    }

    .top-image {
      margin-left: 20rpx;

      .top-image1 {
        width: 24rpx;
        height: 18rpx;
      }
    }
  }

  .item-bottom {
    background-color: #ffffff;
    margin-top: 10rpx;
    border-radius: 20rpx;
    padding: 30rpx;

    .bottom-top {
      display: flex;

      .top-img {
        width: 98rpx;
        height: 98rpx;
        border-radius: 10rpx;
      }

      .top-text {
        width: 100%;

        .top-right {
          .top-right-top {
            display: flex;
            justify-content: space-between;

            .top-right-top-Job {
              font-size: 32rpx;
              font-weight: bold;
              color: #000000;
              margin-left: 20rpx;
              display: flex;
              align-items: center;

              .top-right-top-img {
                width: 30rpx;
                height: 30rpx;
                margin-left: 23rpx;
              }

              .bottom-bottom-left-btn {
                margin-left: 20rpx;
                padding: 5rpx;
                border: 1rpx solid #3476fe;
                background: #ffffff;
                color: #3476fe;
                border-radius: 10rpx;
                font-size: 20rpx;
                display: flex;
                align-items: center;

                .bottom-bottom-left-btn-img {
                  width: 18rpx;
                  height: 20rpx;
                  margin-right: 10rpx;
                }
              }
            }

            .top-right-top-zhuangtai {
              font-size: 26rpx;
              font-weight: 400;
              color: #666666;
            }
          }

          .top-right-bottom {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;
            margin-top: 13rpx;
            margin-left: 20rpx;
            display: flex;
            justify-content: space-between;

            .top-right-bottom1 {
              display: flex;

              .top-right-bottom-icon {
                margin-left: 14rpx;
              }
            }
          }
        }
      }
    }

    .bottom-bottom {
      display: flex;
      justify-content: flex-end;

      // .bottom-bottom-left {
      // 	display: flex;
      // 	align-items: center;
      // 	margin-top: 45rpx;

      // 	.bottom-bottom-left-img {
      // 		width: 36rpx;
      // 		height: 36rpx;
      // 		margin-right: 10rpx;
      // 		border-radius: 50rpx;
      // 	}

      // 	.bottom-bottom-left-name {
      // 		margin-right: 10rpx;
      // 	}

      // }

      .bottom-bottom-right {
        display: flex;
        margin-top: 34rpx;

        .right-jujue {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
          width: 164rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          opacity: 1;
          border: 1rpx solid rgba(0, 0, 0, 0.2);
          margin-left: 20rpx;
        }

        .right-tongyi {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #3476fe;
          width: 164rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          opacity: 1;
          border: 1rpx solid #3476fe;
          margin-left: 20rpx;
        }

        .right-jinru {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 400;
          color: #ffffff;
          width: 164rpx;
          height: 64rpx;
          background: #3476fe;
          border-radius: 36rpx;
          opacity: 1;
          margin-left: 20rpx;
        }

        .right-text {
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          display: flex;
          align-items: center;
        }

        .radioCla {
          height: 64rpx;
          display: flex;
          align-items: center;

          .right-jujue {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #000000;
            width: 164rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 36rpx;
            opacity: 1;
            border: 1rpx solid rgba(0, 0, 0, 0.2);
            margin-left: 20rpx;
          }

          .right-tongyi {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #3476fe;
            width: 164rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 36rpx;
            opacity: 1;
            border: 1rpx solid #3476fe;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>